const banner = document.querySelector('.banner')
const uls = document.querySelector('.banner').querySelector('ul').querySelectorAll('li')
const ols = document.querySelector('ol').querySelectorAll('li')
const banner_left = document.querySelector('.banner-left')
const banner_right = document.querySelector('.banner-right')
let num = 0
function clean() {
    for(let i = 0; i < uls.length; i++) {
        uls[i].className = ''
        ols[i].className = ''
    }
}

banner_left.addEventListener('click',function() {
    clean()
    if(num == 0) {
        num = 2
        uls[num].className = 'banner-img'
        ols[num].className = 'banner-icon'
    } else {
        num--
        uls[num].className = 'banner-img'
        ols[num].className = 'banner-icon'
    }
})

banner_right.addEventListener('click',function() {
    clean()
    if(num == 2) {
        num = 0
        uls[num].className = 'banner-img'
        ols[num].className = 'banner-icon'
    } else {
        num++
        uls[num].className = 'banner-img'
        ols[num].className = 'banner-icon'
    }
})
 let time = setInterval(function() {
    banner_right.click()
 }, 1000);

banner.addEventListener('mouseleave',function () {
    time = setInterval(function() {
        banner_right.click()
     }, 1000);
})
banner.addEventListener('mouseenter',function () {
    clearInterval(time)
})
for(let i = 0; i < ols.length; i++) {
    ols[i].setAttribute('index',i)
    ols[i].addEventListener('click',function() {
        clean()
        index = parseInt(this.getAttribute('index'))
        uls[index].className = 'banner-img'
        ols[index].className = 'banner-icon'
    })
}